<template>
  <div class="AuthorizationBox">
    <div class="upload_box" @drop="reportDrop">
      <div class="right_box">
        <div class="right_box_item">
          <span>机 器 码: {{ " " + info }}</span>
          <i
            class="ym-custom ym-custom-content-copy iconstyle tag-read"
            :data-clipboard-text="info"
            @click="copy"
          ></i>
          <span v-if="copyOpen" style="color: #0e9be6">成功</span>
        </div>
        <div class="right_box_item" v-if="list">
          <p>基本信息:{{ list.info }}</p>
          <p>开始时间:{{ jsbos.dateFormat(list.startDate) }}</p>
          <p>截止时间:{{ jsbos.dateFormat(list.endDate) }}</p>
          <p>是否有效: {{ list.isExist ? "是" : "否" }}</p>
          <p v-if="list.description">描述:{{ list.description }}</p>
        </div>
        <div class="right_box_item" v-else>
          <p>暂无授权信息，请上传授权文件进行授权！</p>
        </div>
      </div>

      <el-upload
        v-if="list == null"
        class="upload"
        ref="upload"
        action="string"
        accept=".lic"
        :file-list="fileList"
        :auto-upload="false"
        :http-request="uploadFile"
        :on-change="handleChange"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        multiple="multiple"
        drag
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传lic授权文件</div>
      </el-upload>
    </div>
  </div>
</template>
<script>
const define = require("@/utils/define.js");
import Clipboard from "clipboard"; //复制文本组件
import request from "@/utils/request";
import UploadFileSingle from "@/components/upload/UploadFileSingle";
export default {
  components: {
    UploadFileSingle,
  },
  data() {
    return {
      // el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",
      info: "",
      list: null,
      copyOpen: false,
    };
  },
  created() {
    // setTimeout(() => {
    //   this.getList();
    // }, 10000);
  },
  mounted() {
    this.getlog();
  },
  // computed: {
  //   AuthorizationOpen() {
  //     return this.$store.state.user.AuthorizationOpen;
  //   },
  // },
  watch: {
    AuthorizationOpen(n, o) {
      if (n == true) {
        this.getlog();
      }
    },
    fileList(n) {
      console.log(n);
      this.onSubmit();
    },
  },
  methods: {
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    //自定义上传文件
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    //删除文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview(file) {
      console.log(file);
    },
    //保存按钮
    onSubmit() {
      let formData = new FormData();
      formData.append("file", this.fileList[0].raw); //拿到存在fileList的文件存放到formData中

      request({
        url: `/api/white/license/Uploader/license`,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data;charset=utf-8",
        },
        data: formData,
      }).then((res) => {
        if (res.data.isExist) {
          console.log(res);
          this.$message.success("证书安装成功");
          this.list = res.data;
        }
      });
    },

    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        console.log("复制成功");
        this.copyOpen = true;
        setTimeout(() => {
          this.copyOpen = false;
        }, 1000);
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    getlog() {
      request({
        url: "/api/white/license/getLicenseInfo",
        method: "get",
      }).then((res) => {
        this.info = res.data.machineCode;
        if (res.data.isExist) {
          this.list = res.data;
        }
      });
    },
    // 阻止火狐浏览器拖拽上传文件弹出新窗口
    reportDrop(event) {
      event.preventDefault();
      event.stopPropagation();
    },
  },
};
</script>

<style scoped lang="scss">
.AuthorizationBox {
  >>> .el-upload-dragger {
    width: 280px;
    height: 200px;
  }

  .upload_box {
    width: 100%;
    display: flex;

    .right_box {
      border-left: 1px dashed #ccc;
      margin: 10px;
      width: 450px;
      padding: 18px;
    }

    .right_box_item {
      margin-top: 6px;

      p {
        margin-top: 15px;
      }
    }

    .iconstyle {
      cursor: pointer;
      margin-left: 8px;
      color: #0e9be6;
    }
  }

  .upload {
    flex: 1;
    margin-top: 30px;
    // width: 100%;
    padding: 18px;
    border-left: 1px dashed #ccc;
    display: flex;
    flex-direction: column;
    // align-items: center;
  }

  .upload-ipt {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
